<template>
  <div class="all-tasks-page">

    <div style="display: flex; justify-content: center;">
      <el-row type="flex" id="release-btn" style="width: 66%; margin-top: 15px">
        <img src="../../../assets/image/plaza-green.png" alt="" style="width: 150px">
      </el-row>
    </div>

    <div class="list-box">
      <task-info-list
      :loading="loading"
      :data="taskList"
      :data-items="['taskname', 'username', 'type', 'deviceRequirement', 'need_num', 'deadline', 'reportPrice']">
        <template slot="option" scope="{task}">
          <el-button type="admin" @click="gotoDetail(task.id)">任务详情</el-button>
        </template>
      </task-info-list>
    </div>

  </div>
</template>

<script>
import {getAllTasks} from "@/api/task";
import TaskInfoList from "@/components/new/info-list/TaskInfoList";
import {transformTaskType} from "@/utils/TaskType";

export default {
  name: "Plaza",
  components: {TaskInfoList},
  created() {
    this.getTaskList();
  },

  data() {
    return {
      taskList: [],
      loading: true
    }
  },


  methods: {
    async getTaskList() {
      const res = await getAllTasks();
      if (res.code === 500) {
        this.loading = false;
        return this.$message.error('获取任务列表失败');
      }
      if (res.code === 404) {
        this.loading = false;
        return this.$message.info('未获取到已发布的任务');
      }

      this.taskList = transformTaskType(res.data);

      this.loading = false;
    },

    gotoDetail(taskID) {
      this.$router.push(`/admin/detail/${taskID}`)
    }
  }

}
</script>

<style scoped>

.list-box {
  border: 1px solid #DCDFE6;
  box-shadow: 0 0 8px #909399;

  margin: 0 auto;
  width: 60%;
  padding: 3% 3%;

  background-color: #ffffff;
}

</style>
